<template>
  <base-modal :title="$t('common.pageTitle.pageCreateCustomer')" :show.sync="addCustomerDialog" class="add-dialog-container-product" width="800px">
    <customer-edit-view v-if="addCustomerDialog" ref="CustomerCreateView" />
    <div class="dialog-footer" slot="footer">
      <el-button @click="addCustomerDialog = false">{{$t('common.base.close')}}</el-button>
      <el-button type="primary" @click="addCustomerSubmit">{{$t('common.modal.MODIFY')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import CustomerEditView from '@src/modules/customer/editForModal/CustomerEditView.vue';
import {
  getCreateCustomerData
} from "@src/api/TaskApi";
export default {
  name: "EditCustomerDialog",
  data() {
    return {
      addCustomerDialog: false,
      customerInfo: {}
    }
  },
  provide() {
    return {
      initData: this.customerInfo,
    }
  },
  components: {
    CustomerEditView,
  },
  methods: {
    async openDialog() {
      try {
        let res= await getCreateCustomerData();
        for(let key in res.data) {
          this.$set(this.customerInfo, key, res.data[key])
        }
        this.addCustomerDialog = true;
        this.$refs?.CustomerCreateView?.initFormData()
      } catch (e) {
        console.error(e)
      }
    },
    addCustomerSubmit() {
      this.$refs?.CustomerCreateView?.submit(data => {
        this.$emit('updateCustomerRelation', data)
      })
    },
  }
}
</script>

<style scoped lang="scss">
.add-dialog-container-product {
  ::v-deep .base-modal-body {
    height: 580px;
    .customer-modal-container {
      .form-builder {
        width: 100%;
        margin-top: 0;
      }
    }
  }
}
</style>